
import { useState } from "react";
import instance from "../utils/https"
import "@/css/login.less";
import { useNavigate } from "react-router-dom";
import { message } from "antd";
const Login = () => {
    const Navigate = useNavigate()
    const [formData, setFormData] = useState({
        username: "",
        password: "",
    });
    const [errors, setErrors] = useState({
        username: "",
        password: "",
    });

    // 正则表达式验证手机号
    const isValidPhoneNumber = (phone:string) => {
      const phoneRegex = /^1[3456789]\d{9}$/;

    // 中国手机号验证规则
        return phoneRegex.test(phone);
    };

    const handleChange = (e: { target: { name: any; value: any; }; }) => {
        const { name, value } = e.target;
        setFormData((prev) => ({ ...prev, [name]: value }));

        // 实时校验
        if (name === "username") {
            if (!isValidPhoneNumber(value)) {
                setErrors((prev) => ({ ...prev, username: "请输入你注册的手机号" }));
            } else {
                setErrors((prev) => ({ ...prev, username: "" }));
            }
        }
    };

    const handleSubmit = async (e: { preventDefault: () => void; }) => {
        e.preventDefault();

        const { username, password } = formData;

        // 校验手机号是否合法
        if (!isValidPhoneNumber(username)) {
            setErrors((prev) => ({
                ...prev,
                username: "请输入你注册的手机号",
            }));
            return;
        }

        if (!password.trim()) {
            setErrors((prev) => ({
                ...prev,
                password: "密码不能为空",
            }));
            return;
        }
        try {
            // 如果校验通过
            const res:any = await instance.post('/login', { phoneNumber: username, password: password });
            if (res.code == 200) {
                message.success('登录成功');
                localStorage.setItem('token', res.token);
                localStorage.setItem('_id', res.user._id);
                localStorage.setItem('isApply', res.user.isApply);
                localStorage.setItem('isAudit', res.user.isAudit);
                Navigate('/app/layout/home');
            }
        } catch {
            message.error('手机号或密码错误');
        }

    };

    return (
        <div className="login-container">
            <h1 className="login-title">登录</h1>
            <form className="login-form" onSubmit={handleSubmit}>
                <div className="form-group">
                    <label htmlFor="username">账号</label>
                    <input
                        type="text"
                        id="username"
                        name="username"
                        placeholder="请输入你注册的手机号"
                        value={formData.username}
                        onChange={handleChange}
                    />
                    {errors.username && (
                        <p className="error-message">{errors.username}</p>
                    )}
                </div>
                <div className="form-group">
                    <label htmlFor="password">密码</label>
                    <input
                        type="password"
                        id="password"
                        name="password"
                        placeholder="请输入密码"
                        value={formData.password}
                        onChange={handleChange}
                    />
                    {errors.password && (
                        <p className="error-message">{errors.password}</p>
                    )}
                </div>
                <p className="p" onClick={() => { Navigate('/app/register') }}>没有账号?去注册</p>
                <button type="submit" className="login-button">
                    登录
                </button>
            </form>
        </div>
    );
};

export default Login;




